import Spinner from "@lib/Spinner";
import type { RouteDefinition } from "@solidjs/router";

const SpinnerDemo = () => {
  return (
    <div>
      <div>
        <h1>Border</h1>
        <Spinner></Spinner>
        <Spinner color={"primary"}></Spinner>
        <Spinner color={"secondary"}></Spinner>
        <Spinner color={"success"}></Spinner>
        <Spinner color={"warning"}></Spinner>
        <Spinner color={"info"}></Spinner>
        <Spinner color={"light"}></Spinner>
        <Spinner color={"dark"}></Spinner>
      </div>
      <hr></hr>
      <div>
        <h1>Grow</h1>
        <Spinner variant={"grow"}></Spinner>
        <Spinner variant={"grow"} color={"primary"}></Spinner>
        <Spinner variant={"grow"} color={"secondary"}></Spinner>
        <Spinner variant={"grow"} color={"success"}></Spinner>
        <Spinner variant={"grow"} color={"warning"}></Spinner>
        <Spinner variant={"grow"} color={"info"}></Spinner>
        <Spinner variant={"grow"} color={"light"}></Spinner>
        <Spinner variant={"grow"} color={"dark"}></Spinner>
      </div>
      <hr></hr>
      <div>
        <h1>Size</h1>
        <Spinner sm></Spinner>
        <Spinner></Spinner>
        <Spinner style={{ width: "3rem", height: "3rem" }}></Spinner>
        <Spinner variant={"grow"} sm></Spinner>
        <Spinner variant={"grow"}></Spinner>
        <Spinner
          variant={"grow"}
          style={{ width: "3rem", height: "3rem" }}
        ></Spinner>
      </div>
      <hr></hr>
      <div>
        <h1>外边距</h1>
        <Spinner classes={"m-5"}></Spinner>
      </div>
      <hr></hr>
      <div>
        <h1>Flex</h1>
        <div class="d-flex justify-content-center">
          <Spinner></Spinner>
        </div>
        <hr></hr>
        <div class="d-flex align-items-center">
          <strong>Loading...</strong>
          <Spinner classes={"ms-auto"}></Spinner>
        </div>
        <hr></hr>
        <h4>Floats</h4>
        <div class="clearfix">
          <Spinner classes="float-end"></Spinner>
        </div>
        <hr></hr>
        <h2>文本对齐</h2>
        <div class="text-center">
          <Spinner></Spinner>
        </div>
      </div>
      <hr></hr>
      <div>
        <h1>按钮</h1>
        <div>
          <button
            class="btn btn-primary"
            type="button"
            disabled
            style={{ margin: ".25rem .125rem" }}
          >
            <Spinner sm></Spinner>
            <span class="visually-hidden">Loading...</span>
          </button>
          <button
            class="btn btn-primary"
            type="button"
            disabled
            style={{ margin: ".25rem .125rem" }}
          >
            <Spinner sm></Spinner>
            {" Loading... "}
          </button>
        </div>
        <div>
          <button
            class="btn btn-primary"
            type="button"
            disabled
            style={{ margin: ".25rem .125rem" }}
          >
            <Spinner sm variant={"grow"}></Spinner>
            <span class="visually-hidden">Loading...</span>
          </button>
          <button
            class="btn btn-primary"
            type="button"
            disabled
            style={{ margin: ".25rem .125rem" }}
          >
            <Spinner sm variant={"grow"}></Spinner>
            {" Loading... "}
          </button>
        </div>
      </div>
    </div>
  );
};

export const SpinnerDemoRoute: RouteDefinition = {
  path: "/spinner",
  component: SpinnerDemo,
};

export default SpinnerDemo;
